import React, { Component } from 'react';
import Info from "components/info";
import "styles/finance-setting/auto-check-receipt/auto-check-receipt-setting.scss"
import { Badge, Button, message, Popconfirm, Popover } from "antd";
import ResizeTable from "components/resize-table";
import Condition from "components/condition";
import {messages} from "share/common";
import autoCheckService from "../auto-check-receipt.service"
import SlideFrame from "components/slide-frame";
import AutoCheckDetail from "../detail";
import DimMatchSettingDetail from "./dim-match-setting-detail"

const { If } = Condition;

class AutoCheckReceiptSetting extends Component {

  state = {
    loading: false,
    info: {},
    listInfo: [],
    page: 0,
    size: 10,
    pagination: {
      total: 0
    },
  };

  columns = [{
    title: messages('common.invoice.type')/*发票类型*/,
    dataIndex: 'receiptTypeShowValue',
    width: "35%",
    render: value => <Popover content={value} placement="topLeft">{value}</Popover>
  }, {
    title: messages('expense-14.key483')/*匹配字段*/,
    dataIndex: 'checkFieldShowValue',
    width: "35%",
    render: value => <Popover content={value} placement="topLeft">{value}</Popover>
  }, {
    title: messages('common.column.status')/*状态*/,
    dataIndex: 'enabled',
    render: value => (
      <Badge
        status={value ? 'success' : 'error'}
        text={value ? messages('common.status.enable')/*启用*/ : messages('common.status.disable')/*禁用*/}
      />
    )
  }, {
    title: messages('common.operation')/*操作*/,
    dataIndex: 'id',
    render: value => (
      this.props.readOnly ? (
        <span onClick={e => e.stopPropagation()} className="font-disabled">{messages('common.delete')/*删除*/}</span>
      ) : (
        <Popconfirm
          title={messages('common.confirm.delete')/*确定要删除吗？*/}
          onConfirm={() => this.handleDelete(value)}
        >
          <a onClick={e => e.stopPropagation()}>{messages('common.delete')/*删除*/}</a>
        </Popconfirm>
      )
    )
  }];

  componentDidMount() {
    this.getList();
  }

  getList = () => {
    const { configId } = this.props;
    const { page, size } = this.state;
    this.setState({ loading: true });
    let params = { configId, page, size };
    autoCheckService.getRuleList(params).then(res => {
      this.setState({
        listInfo: res.data || [],
        pagination: {
          total: Number(res.headers['x-total-count'] || 0),
          current: this.state.page + 1,
          onChange: this.onChangePager
        }
      });
    }).finally(() => {
      this.setState({ loading: false });
    })
  };

  //分页点击
  onChangePager = page => {
    if(page - 1 !== this.state.page)
      this.setState({ page: page - 1 }, () => {
        this.getList();
      })
  };

  handleNewRule = record => {
    const { configId } = this.props;
    SlideFrame.open({
      title: messages('expense-14.key484')/*模糊匹配*/,
      content: DimMatchSettingDetail,
      afterClose: refresh => refresh && this.getList(),
      params: {
        record: record || {},
        configId
      }
    }, this)
  };

  handleDelete = id => {
    this.setState({ loading: true });
    autoCheckService.deleteRule(id).then(() => {
      message.success(messages('common.delete.success',{arg1: ""})/*{arg1} 删除成功*/);
      this.getList();
    }).finally(() => {
      this.setState({ loading: false });
    })
  };

  render() {
    const { readOnly } = this.props;
    const { loading, listInfo, pagination } = this.state;
    return (
      <div>
        <Info
          paragraph
          attributes={[
            {title: messages('expense-14.key485')/*功能概述*/, dataIndex: 'overview', span: 24, widthFix: false}
          ]}
          dataSource={{
            overview: messages('expense-14.key486')/*系统自动核对线上线下发票一致性，即核对员工录入发票和财务收到的纸质发票扫描件是否一致。当发票经过精确匹配后仍然为未匹配状态，则可进入模糊匹配，模糊匹配基于规则配置的字段进行发票一致性对比*/,
          }}
        />
        <If value={!readOnly}>
          <Button type="primary" style={{ margin: '12px 0' }} onClick={() => this.handleNewRule()}>
            {messages('expense-14.key487')/*新增规则*/}
          </Button>
        </If>
        <ResizeTable
          showUtils
          tableName='receipt-dim-check-table'
          loading={loading}
          dataSource={listInfo}
          columns={this.columns}
          size="middle"
          bordered
          pagination={pagination}
          onRow={record => ({
            onClick: () => this.handleNewRule(record)
          })}
        />
      </div>
    )
  }
}

export default AutoCheckReceiptSetting;
